<template>
	<div class="ui-image-cell" :style="styles">
		<img :src="src" @error="handleOnError" />
		<div v-if="lock" class="ui-image-cell-lock"></div>
	</div>
</template>

<script>
import defaultImage from './default.png';
export default {
	name: 'imageCell',
	props: {
		src: {
			type: String,
			default: ''
		},
		width: {
			type: String | Number,
			default: ''
		},
		height: {
			type: String | Number,
			default: ''
		},
		lock: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			styles: {}
		}
	},
	mounted() {
		this.handleSetStyle();
	},
	watch: {
    	width() {
    		this.handleSetStyle();
    	},
    	height() {
    		this.handleSetStyle();
    	}
    },
	methods: {
		handleSetStyle() {
			let styles = {};
			let width = this.width;
			let height = this.height;
			// 宽度
			if(width) {
				if(typeof width == 'number') {
					width = width + 'px';
				}
				styles.width = width;
			}
			// 高度，当设有宽度而没有设高度时，默认为正方形设置宽度为高度
			if(height) {
				if(typeof height == 'number') {
					height = height + 'px';
				}
				styles.height = height;
			}else{
				if(width) {
					styles.height = width;
				}
			}
			this.styles = styles;
		},
		handleOnError(e) {
			e.target.src = defaultImage;
		}
	}
}
</script>